<template>
	<view>
		<cu-custom :bgImage="bgData" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">新增子模块</block>
		</cu-custom>
		<form @submit="onSubmit">
			<view class="cu-form-group">
				<view class="title">子模块名称</view>
				<input class="text-right" placeholder="输入名称" name="input" v-model="cProject.name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">英文名称</view>
				<input class="text-right" placeholder="输入英文名称" name="input" v-model="cProject.enName"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">价格</view>
				<input class="text-right" placeholder="输入价格" name="input" v-model="cProject.price" type="number"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">图标</view>
				<!-- <view class="text-right">
					请输入
				</view> -->
				<view @tap="showModal" data-target="iconModal">
					<text class="text-gray" :class="'cuIcon-' + cProject.icon" style="font-size: 28px; "></text>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">背景颜色</view>
				<view class="action" @tap="showModal" data-target="colorModal">
					<view class="cu-tag round " :class="'bg-' + cProject.color">{{cProject.colorName}}</view>
				</view>
			</view>
			<!-- <view class="cu-form-group align-start">
				<view class="title">备注</view>
				<textarea maxlength="-1" @input="textareaBInput" placeholder="输入备注" class="text-right" style="right: 10px;" v-model="user.remark"></textarea>
			</view> -->
			
			<view class="cu-modal bottom-modal" :class="modalName=='iconModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">		
						<view class="search-form round">
							<text class="cuIcon-search"></text>
							<input type="text" placeholder="搜索cuIcon" confirm-type="search" @input="searchIcon"></input>
						</view>
						<view class="action text-blue" @tap="hideModal">取消</view>
					</view>
					<view class="cu-list grid col-3" :style="[{marginTop:CustomBar+50 + 'px'}]">
						<view class="cu-item" v-for="(item,index) in cuIcon" :key="index" v-if="item.isShow" @tap="chooseIcon(item.name)">
							<text class="lg text-gray" :class="'cuIcon-' + item.name"></text>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="cu-modal bottom-modal" :class="modalName=='colorModal'?'show':''">
				<view class="cu-dialog">
					<!-- <view class="cu-bar bg-white">
						<view class="action text-green" @tap="addChildProject">确定</view>
						<view class="action text-blue" @tap="hideModal">取消</view>
					</view> -->
					<!-- <view class='padding-sm flex flex-wrap'>
						<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray'" @tap="chooseColor(item.name, item.title)">
							<view class='cu-tag' :class="'bg-' + item.name" style="height: 30px;width: 45px;">{{item.title}}</view>
						</view>
					</view> -->
					<view class="cu-bar bg-white">
						<view class="action text-blue" @tap="hideModal">取消</view>
					</view>
					<view class="grid col-3 padding-sm">
						<view class="padding-sm" v-for="(item,index) in ColorList" :key="index" @tap="chooseColor(item.name, item.title)">
							<view class="padding radius text-center shadow-blur" :class="'bg-' + item.name">
								<view class="text-lg">{{item.title}}</view>
								<view class="margin-top-sm text-Abc">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg" form-type="submit">保存</button>
				<button class="cu-btn bg-red margin-tb-sm lg" v-if="isExist" @tap="deleteChildProject">删除子模块</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgData: this.imgPath+'back.png',
				imgData: '',
				imgList: [],
				switchA: false,
				switchC: true,
				modalName: null,
				cProject: {
					name: '',
					enName: '',
					price: '',
					icon: 'btn',
					color: 'red',
					colorName: '嫣红',
					pid: '',
				},
				ColorList: this.ColorList,
				childProjectId: '',
				isExist: false,
				CustomBar: this.CustomBar,
				cuIcon: [{
					name: 'appreciate',
					isShow: true
				}, {
					name: 'check',
					isShow: true
				}, {
					name: 'close',
					isShow: true
				}, {
					name: 'edit',
					isShow: true
				}, {
					name: 'emoji',
					isShow: true
				}, {
					name: 'favorfill',
					isShow: true
				}, {
					name: 'favor',
					isShow: true
				}, {
					name: 'loading',
					isShow: true
				}, {
					name: 'locationfill',
					isShow: true
				}, {
					name: 'location',
					isShow: true
				}, {
					name: 'phone',
					isShow: true
				}, {
					name: 'roundcheckfill',
					isShow: true
				}, {
					name: 'roundcheck',
					isShow: true
				}, {
					name: 'roundclosefill',
					isShow: true
				}, {
					name: 'roundclose',
					isShow: true
				}, {
					name: 'roundrightfill',
					isShow: true
				}, {
					name: 'roundright',
					isShow: true
				}, {
					name: 'search',
					isShow: true
				}, {
					name: 'taxi',
					isShow: true
				}, {
					name: 'timefill',
					isShow: true
				}, {
					name: 'time',
					isShow: true
				}, {
					name: 'unfold',
					isShow: true
				}, {
					name: 'warnfill',
					isShow: true
				}, {
					name: 'warn',
					isShow: true
				}, {
					name: 'camerafill',
					isShow: true
				}, {
					name: 'camera',
					isShow: true
				}, {
					name: 'commentfill',
					isShow: true
				}, {
					name: 'comment',
					isShow: true
				}, {
					name: 'likefill',
					isShow: true
				}, {
					name: 'like',
					isShow: true
				}, {
					name: 'notificationfill',
					isShow: true
				}, {
					name: 'notification',
					isShow: true
				}, {
					name: 'order',
					isShow: true
				}, {
					name: 'samefill',
					isShow: true
				}, {
					name: 'same',
					isShow: true
				}, {
					name: 'deliver',
					isShow: true
				}, {
					name: 'evaluate',
					isShow: true
				}, {
					name: 'pay',
					isShow: true
				}, {
					name: 'send',
					isShow: true
				}, {
					name: 'shop',
					isShow: true
				}, {
					name: 'ticket',
					isShow: true
				}, {
					name: 'back',
					isShow: true
				}, {
					name: 'cascades',
					isShow: true
				}, {
					name: 'discover',
					isShow: true
				}, {
					name: 'list',
					isShow: true
				}, {
					name: 'more',
					isShow: true
				}, {
					name: 'scan',
					isShow: true
				}, {
					name: 'settings',
					isShow: true
				}, {
					name: 'questionfill',
					isShow: true
				}, {
					name: 'question',
					isShow: true
				}, {
					name: 'shopfill',
					isShow: true
				}, {
					name: 'form',
					isShow: true
				}, {
					name: 'pic',
					isShow: true
				}, {
					name: 'filter',
					isShow: true
				}, {
					name: 'footprint',
					isShow: true
				}, {
					name: 'top',
					isShow: true
				}, {
					name: 'pulldown',
					isShow: true
				}, {
					name: 'pullup',
					isShow: true
				}, {
					name: 'right',
					isShow: true
				}, {
					name: 'refresh',
					isShow: true
				}, {
					name: 'moreandroid',
					isShow: true
				}, {
					name: 'deletefill',
					isShow: true
				}, {
					name: 'refund',
					isShow: true
				}, {
					name: 'cart',
					isShow: true
				}, {
					name: 'qrcode',
					isShow: true
				}, {
					name: 'remind',
					isShow: true
				}, {
					name: 'delete',
					isShow: true
				}, {
					name: 'profile',
					isShow: true
				}, {
					name: 'home',
					isShow: true
				}, {
					name: 'cartfill',
					isShow: true
				}, {
					name: 'discoverfill',
					isShow: true
				}, {
					name: 'homefill',
					isShow: true
				}, {
					name: 'message',
					isShow: true
				}, {
					name: 'addressbook',
					isShow: true
				}, {
					name: 'link',
					isShow: true
				}, {
					name: 'lock',
					isShow: true
				}, {
					name: 'unlock',
					isShow: true
				}, {
					name: 'vip',
					isShow: true
				}, {
					name: 'weibo',
					isShow: true
				}, {
					name: 'activity',
					isShow: true
				}, {
					name: 'friendaddfill',
					isShow: true
				}, {
					name: 'friendadd',
					isShow: true
				}, {
					name: 'friendfamous',
					isShow: true
				}, {
					name: 'friend',
					isShow: true
				}, {
					name: 'goods',
					isShow: true
				}, {
					name: 'selection',
					isShow: true
				}, {
					name: 'explore',
					isShow: true
				}, {
					name: 'present',
					isShow: true
				}, {
					name: 'squarecheckfill',
					isShow: true
				}, {
					name: 'square',
					isShow: true
				}, {
					name: 'squarecheck',
					isShow: true
				}, {
					name: 'round',
					isShow: true
				}, {
					name: 'roundaddfill',
					isShow: true
				}, {
					name: 'roundadd',
					isShow: true
				}, {
					name: 'add',
					isShow: true
				}, {
					name: 'notificationforbidfill',
					isShow: true
				}, {
					name: 'explorefill',
					isShow: true
				}, {
					name: 'fold',
					isShow: true
				}, {
					name: 'game',
					isShow: true
				}, {
					name: 'redpacket',
					isShow: true
				}, {
					name: 'selectionfill',
					isShow: true
				}, {
					name: 'similar',
					isShow: true
				}, {
					name: 'appreciatefill',
					isShow: true
				}, {
					name: 'infofill',
					isShow: true
				}, {
					name: 'info',
					isShow: true
				}, {
					name: 'forwardfill',
					isShow: true
				}, {
					name: 'forward',
					isShow: true
				}, {
					name: 'rechargefill',
					isShow: true
				}, {
					name: 'recharge',
					isShow: true
				}, {
					name: 'vipcard',
					isShow: true
				}, {
					name: 'voice',
					isShow: true
				}, {
					name: 'voicefill',
					isShow: true
				}, {
					name: 'friendfavor',
					isShow: true
				}, {
					name: 'wifi',
					isShow: true
				}, {
					name: 'share',
					isShow: true
				}, {
					name: 'wefill',
					isShow: true
				}, {
					name: 'we',
					isShow: true
				}, {
					name: 'lightauto',
					isShow: true
				}, {
					name: 'lightforbid',
					isShow: true
				}, {
					name: 'lightfill',
					isShow: true
				}, {
					name: 'camerarotate',
					isShow: true
				}, {
					name: 'light',
					isShow: true
				}, {
					name: 'barcode',
					isShow: true
				}, {
					name: 'flashlightclose',
					isShow: true
				}, {
					name: 'flashlightopen',
					isShow: true
				}, {
					name: 'searchlist',
					isShow: true
				}, {
					name: 'service',
					isShow: true
				}, {
					name: 'sort',
					isShow: true
				}, {
					name: 'down',
					isShow: true
				}, {
					name: 'mobile',
					isShow: true
				}, {
					name: 'mobilefill',
					isShow: true
				}, {
					name: 'copy',
					isShow: true
				}, {
					name: 'countdownfill',
					isShow: true
				}, {
					name: 'countdown',
					isShow: true
				}, {
					name: 'noticefill',
					isShow: true
				}, {
					name: 'notice',
					isShow: true
				}, {
					name: 'upstagefill',
					isShow: true
				}, {
					name: 'upstage',
					isShow: true
				}, {
					name: 'babyfill',
					isShow: true
				}, {
					name: 'baby',
					isShow: true
				}, {
					name: 'brandfill',
					isShow: true
				}, {
					name: 'brand',
					isShow: true
				}, {
					name: 'choicenessfill',
					isShow: true
				}, {
					name: 'choiceness',
					isShow: true
				}, {
					name: 'clothesfill',
					isShow: true
				}, {
					name: 'clothes',
					isShow: true
				}, {
					name: 'creativefill',
					isShow: true
				}, {
					name: 'creative',
					isShow: true
				}, {
					name: 'female',
					isShow: true
				}, {
					name: 'keyboard',
					isShow: true
				}, {
					name: 'male',
					isShow: true
				}, {
					name: 'newfill',
					isShow: true
				}, {
					name: 'new',
					isShow: true
				}, {
					name: 'pullleft',
					isShow: true
				}, {
					name: 'pullright',
					isShow: true
				}, {
					name: 'rankfill',
					isShow: true
				}, {
					name: 'rank',
					isShow: true
				}, {
					name: 'bad',
					isShow: true
				}, {
					name: 'cameraadd',
					isShow: true
				}, {
					name: 'focus',
					isShow: true
				}, {
					name: 'friendfill',
					isShow: true
				}, {
					name: 'cameraaddfill',
					isShow: true
				}, {
					name: 'apps',
					isShow: true
				}, {
					name: 'paintfill',
					isShow: true
				}, {
					name: 'paint',
					isShow: true
				}, {
					name: 'picfill',
					isShow: true
				}, {
					name: 'refresharrow',
					isShow: true
				}, {
					name: 'colorlens',
					isShow: true
				}, {
					name: 'markfill',
					isShow: true
				}, {
					name: 'mark',
					isShow: true
				}, {
					name: 'presentfill',
					isShow: true
				}, {
					name: 'repeal',
					isShow: true
				}, {
					name: 'album',
					isShow: true
				}, {
					name: 'peoplefill',
					isShow: true
				}, {
					name: 'people',
					isShow: true
				}, {
					name: 'servicefill',
					isShow: true
				}, {
					name: 'repair',
					isShow: true
				}, {
					name: 'file',
					isShow: true
				}, {
					name: 'repairfill',
					isShow: true
				}, {
					name: 'taoxiaopu',
					isShow: true
				}, {
					name: 'weixin',
					isShow: true
				}, {
					name: 'attentionfill',
					isShow: true
				}, {
					name: 'attention',
					isShow: true
				}, {
					name: 'commandfill',
					isShow: true
				}, {
					name: 'command',
					isShow: true
				}, {
					name: 'communityfill',
					isShow: true
				}, {
					name: 'community',
					isShow: true
				}, {
					name: 'read',
					isShow: true
				}, {
					name: 'calendar',
					isShow: true
				}, {
					name: 'cut',
					isShow: true
				}, {
					name: 'magic',
					isShow: true
				}, {
					name: 'backwardfill',
					isShow: true
				}, {
					name: 'playfill',
					isShow: true
				}, {
					name: 'stop',
					isShow: true
				}, {
					name: 'tagfill',
					isShow: true
				}, {
					name: 'tag',
					isShow: true
				}, {
					name: 'group',
					isShow: true
				}, {
					name: 'all',
					isShow: true
				}, {
					name: 'backdelete',
					isShow: true
				}, {
					name: 'hotfill',
					isShow: true
				}, {
					name: 'hot',
					isShow: true
				}, {
					name: 'post',
					isShow: true
				}, {
					name: 'radiobox',
					isShow: true
				}, {
					name: 'rounddown',
					isShow: true
				}, {
					name: 'upload',
					isShow: true
				}, {
					name: 'writefill',
					isShow: true
				}, {
					name: 'write',
					isShow: true
				}, {
					name: 'radioboxfill',
					isShow: true
				}, {
					name: 'punch',
					isShow: true
				}, {
					name: 'shake',
					isShow: true
				}, {
					name: 'move',
					isShow: true
				}, {
					name: 'safe',
					isShow: true
				}, {
					name: 'activityfill',
					isShow: true
				}, {
					name: 'crownfill',
					isShow: true
				}, {
					name: 'crown',
					isShow: true
				}, {
					name: 'goodsfill',
					isShow: true
				}, {
					name: 'messagefill',
					isShow: true
				}, {
					name: 'profilefill',
					isShow: true
				}, {
					name: 'sound',
					isShow: true
				}, {
					name: 'sponsorfill',
					isShow: true
				}, {
					name: 'sponsor',
					isShow: true
				}, {
					name: 'upblock',
					isShow: true
				}, {
					name: 'weblock',
					isShow: true
				}, {
					name: 'weunblock',
					isShow: true
				}, {
					name: 'my',
					isShow: true
				}, {
					name: 'myfill',
					isShow: true
				}, {
					name: 'emojifill',
					isShow: true
				}, {
					name: 'emojiflashfill',
					isShow: true
				}, {
					name: 'flashbuyfill',
					isShow: true
				}, {
					name: 'text',
					isShow: true
				}, {
					name: 'goodsfavor',
					isShow: true
				}, {
					name: 'musicfill',
					isShow: true
				}, {
					name: 'musicforbidfill',
					isShow: true
				}, {
					name: 'card',
					isShow: true
				}, {
					name: 'triangledownfill',
					isShow: true
				}, {
					name: 'triangleupfill',
					isShow: true
				}, {
					name: 'roundleftfill-copy',
					isShow: true
				}, {
					name: 'font',
					isShow: true
				}, {
					name: 'title',
					isShow: true
				}, {
					name: 'recordfill',
					isShow: true
				}, {
					name: 'record',
					isShow: true
				}, {
					name: 'cardboardfill',
					isShow: true
				}, {
					name: 'cardboard',
					isShow: true
				}, {
					name: 'formfill',
					isShow: true
				}, {
					name: 'coin',
					isShow: true
				}, {
					name: 'cardboardforbid',
					isShow: true
				}, {
					name: 'circlefill',
					isShow: true
				}, {
					name: 'circle',
					isShow: true
				}, {
					name: 'attentionforbid',
					isShow: true
				}, {
					name: 'attentionforbidfill',
					isShow: true
				}, {
					name: 'attentionfavorfill',
					isShow: true
				}, {
					name: 'attentionfavor',
					isShow: true
				}, {
					name: 'titles',
					isShow: true
				}, {
					name: 'icloading',
					isShow: true
				}, {
					name: 'full',
					isShow: true
				}, {
					name: 'mail',
					isShow: true
				}, {
					name: 'peoplelist',
					isShow: true
				}, {
					name: 'goodsnewfill',
					isShow: true
				}, {
					name: 'goodsnew',
					isShow: true
				}, {
					name: 'medalfill',
					isShow: true
				}, {
					name: 'medal',
					isShow: true
				}, {
					name: 'newsfill',
					isShow: true
				}, {
					name: 'newshotfill',
					isShow: true
				}, {
					name: 'newshot',
					isShow: true
				}, {
					name: 'news',
					isShow: true
				}, {
					name: 'videofill',
					isShow: true
				}, {
					name: 'video',
					isShow: true
				}, {
					name: 'exit',
					isShow: true
				}, {
					name: 'skinfill',
					isShow: true
				}, {
					name: 'skin',
					isShow: true
				}, {
					name: 'moneybagfill',
					isShow: true
				}, {
					name: 'usefullfill',
					isShow: true
				}, {
					name: 'usefull',
					isShow: true
				}, {
					name: 'moneybag',
					isShow: true
				}, {
					name: 'redpacket_fill',
					isShow: true
				}, {
					name: 'subscription',
					isShow: true
				}, {
					name: 'loading1',
					isShow: true
				}, {
					name: 'github',
					isShow: true
				}, {
					name: 'global',
					isShow: true
				}, {
					name: 'settingsfill',
					isShow: true
				}, {
					name: 'back_android',
					isShow: true
				}, {
					name: 'expressman',
					isShow: true
				}, {
					name: 'evaluate_fill',
					isShow: true
				}, {
					name: 'group_fill',
					isShow: true
				}, {
					name: 'play_forward_fill',
					isShow: true
				}, {
					name: 'deliver_fill',
					isShow: true
				}, {
					name: 'notice_forbid_fill',
					isShow: true
				}, {
					name: 'fork',
					isShow: true
				}, {
					name: 'pick',
					isShow: true
				}, {
					name: 'wenzi',
					isShow: true
				}, {
					name: 'ellipse',
					isShow: true
				}, {
					name: 'qr_code',
					isShow: true
				}, {
					name: 'dianhua',
					isShow: true
				}, {
					name: 'cuIcon',
					isShow: true
				}, {
					name: 'loading2',
					isShow: true
				}, {
					name: 'btn',
					isShow: true
				}]
			}
		},
		onLoad(e) {
			if(e.id === null || e.id === '' || e.id === undefined) {
				
			} else {
				this.childProjectId = e.id
				this.isExist = true
				this.showChildProject(e.id)
			}
			if(e.pid === null || e.pid === '' || e.pid === undefined) {
				
			} else {
				this.cProject.pid = e.pid
			}
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			searchIcon(e) {
				let key = e.detail.value.toLowerCase();
				let list = this.cuIcon;
				for (let i = 0; i < list.length; i++) {
					let a = key;
					let b = list[i].name.toLowerCase();
					if (b.search(a) != -1) {
						list[i].isShow = true
					} else {
						list[i].isShow = false
					}
				}
				this.cuIcon = list
			},
			chooseIcon(e) {
				this.cProject.icon = e
				this.hideModal()
			},
			chooseColor(name, title) {
				this.cProject.color = name
				this.cProject.colorName = title
				this.hideModal()
			},
			showChildProject(id) {
				
				uni.request({
					url: this.serverPath + 'project/postChildProjectById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: id
					},
					success:(res)=> {
						this.cProject = res.data.data
					}
				})
			},
			// 提交人员表单
			onSubmit() {
				if(this.cProject.name==null || this.cProject.name==''){
					uni.showToast({
						icon:'none',
						title:'请输入名称'
					})
					return;
				}
				if(this.cProject.price==null || this.cProject.price=='' || this.cProject.price==0){
					uni.showToast({
						icon:'none',
						title:'请输入价格（不为零）'
					})
					return;
				}
				
				uni.showLoading({
				    title: '加载中',
					mask:true
				});
				if(this.isExist) {
					this.updateChildProject()
				} else {
					this.addChildProject()
				}
			},
			addChildProject() {
				uni.request({
					url: this.serverPath + '/project/addChildProject',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					
					data: this.cProject,
					success:(res)=> {
						uni.hideLoading();
						if(res.data.status==200){
							uni.showToast({
								title:'成功添加子模块！',
								success: () => {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}
				})
			},
			updateChildProject() {
				
				uni.request({
					url: this.serverPath + '/project/updateChildProject',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: this.cProject,
					success:(res)=> {
						uni.hideLoading();
						if(res.data.status==200){
							uni.showToast({
								title:'修改成功！',
								success: () => {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}
				})
			},
			deleteChildProject() {
				uni.request({
					url: this.serverPath + '/project/deleteChildProjectById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: this.childProjectId
					},
					success:(res)=> {
						uni.hideLoading();
						if(res.data.status==200){
							uni.showToast({
								title:'删除子项成功！',
								success: () => {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	
	/* uni-switch .wx-switch-input:not([class*="bg-"]), uni-switch .uni-switch-input:not([class*="bg-"]) {
	    background: #e54d42 !important;
	} */
	
	.grid.grid-square>uni-view {
		margin: unset;
	}
</style>
